<route lang="yaml">
meta:
  layout: home
</route>

<template>
  <div>
    <p class="text-4xl">
      <carbon-campsite class="inline-block" />
    </p>
    <p>
      <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
        Vitesse
      </a>
    </p>
    <p>
      <em class="text-sm opacity-75">{{ i.t('intro.desc') }}</em>
    </p>

    <div class="py-4" />

    <input
      id="input"
      v-model="name"
      :placeholder="i.t('intro.whats-your-name')"
      :aria-label="i.t('intro.whats-your-name')"
      type="text"
      autocomplete="false"
      class="px-4 py-2 text-sm text-center bg-transparent border border-gray-200 rounded outline-none active:outline-none dark:border-gray-700"
      style="width: 250px"
      @keydown.enter="go"
    >
    <label class="hidden" for="input">{{ i.t('intro.whats-your-name') }}</label>

    <div>
      <button
        class="m-3 text-sm btn"
        :disabled="!name"
        @click="go"
      >
        {{ i.t('button.go') }}
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

export default {
  name: 'Index',
  setup() {
    const s = reactive({
      name: '',
      router: useRouter(),
      go() {
        console.debug('go! name: %o', s.name)
        if (s.name)
          s.router.push(`/hi/${encodeURIComponent(s.name)}`)
      },
      i: useI18n()
    })
    return s
  }
}
</script>
